import React, { Component } from 'react';
import Taro from '@tarojs/taro';
import { View, Text, Button, Image } from '@tarojs/components';
import './index.scss'
import { findNameByFieldNameAndDictItemValue } from '@/services/api/common';
import { changeDecimalToPercentage, parseDateFromStr } from '@/utils/fomatter';

interface FundDetailHeaderProps {
    className?: string;
    detailData: {}
}

class FundDetailHeader extends Component<FundDetailHeaderProps, any> {

    config = {
        navigationBarTitleText: ''
    }

    state = {}

    componentWillMount() { }
    componentDidMount() { }
    componentWillReceiveProps(nextProps, nextContext) { }
    componentWillUnmount() { }

    render() {
        const { className, detailData } = this.props
        return (
            <View className={`fund-detail-header ${className}`}>
                <View className='title-icon'>
                    <Text>{detailData['fundName']}</Text>
                    <View className='ydt-icon'>
                        <Image src={require('@/assets/icons/public/fund_list_ydt.svg')} style={{ width: 10, height: 10, }}></Image>
                    </View>
                </View>
                <View className='fund-tag'>
                    {
                        (detailData['fundType'] !== undefined && detailData['fundType'] !== -1 && detailData['fundType'] !== 0) ? <View className=' ydt-tag-item '>{findNameByFieldNameAndDictItemValue('fund_type', detailData['fundType'])}</View> : null
                    }
                    {
                        (detailData['riskLevel'] !== undefined && detailData['riskLevel'] !== -1 && detailData['riskLevel'] !== 0) ? <View className=' ydt-tag-item '>{`产品评级:${findNameByFieldNameAndDictItemValue('risk_level', detailData['riskLevel'])}`}</View> : null
                    }
                    {
                        (detailData['fundStatus'] !== undefined && detailData['fundStatus'] !== -1 && detailData['fundStatus'] !== 0) ? <View className=' ydt-tag-item '>{findNameByFieldNameAndDictItemValue('fund_status', detailData['fundStatus'])}</View> : null
                    }
                </View>

                {
                    detailData['performance'] !== undefined ?
                        <View className='fund-context'>
                            <View className='fund-context-item  d_zdf'>
                                <View className={Number(detailData['performance']['dateRate']) > 0 ? '.num-positive-text' : (Number(detailData['performance']['dateRate']) < 0 ? 'num-negative-text' : '')}><Text>{`${Number(detailData['performance']['dateRate']) > 0 ? '+' : ''}`}{changeDecimalToPercentage(detailData['performance']['dateRate'], 2)}</Text>%</View>
                                <Text className='fund-context-item-desc' space='nbsp' decode>{`日涨跌&nbsp;${(detailData['performance']['netDate'] !== undefined && detailData['performance']['netDate'] !== null && detailData['performance']['netDate'] !== 0) ? parseDateFromStr(detailData['performance']['netDate'], 'MM-DD') : '-'}`}</Text>
                            </View>
                            <View className='fund-context-item  dwjz'>
                                <View className=''>{Number(detailData['performance']['unitNet']).toFixed(4)}</View>
                                <Text className='fund-context-item-desc' space='nbsp' decode>{`净值&nbsp;${(detailData['performance']['netDate'] !== undefined && detailData['performance']['netDate'] !== null && detailData['performance']['netDate'] !== 0) ? parseDateFromStr(detailData['performance']['netDate'], 'MM-DD') : '-'}`}</Text>
                            </View>
                            <View className='fund-context-item  y_zdf'>
                                <View className={Number(detailData['performance']['yearRate']) > 0 ? '.num-positive-text' : (Number(detailData['performance']['yearRate']) < 0 ? 'num-negative-text' : '')}><Text>{`${Number(detailData['performance']['yearRate']) > 0 ? '+' : ''}`}{changeDecimalToPercentage(detailData['performance']['yearRate'], 2)}</Text>%</View>
                                <View className='fund-context-item-desc'>近一年涨跌幅</View>
                            </View>

                        </View> : null
                }



            </View>
        );
    }
}
export default FundDetailHeader;